<template>
  <div>
    <el-form :inline="true" :model="looklist" class="demo-form-inline">
      <el-form-item label="系统名称">
        <el-input v-model="looklist.menuName" placeholder="系统名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="looklist.status" placeholder="状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button  @click="zhikong">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
     <el-col :span="1.5">
       <el-button
           type="primary"
           plain
           icon="el-icon-plus"
           size="mini"
           @click="toadd"
       >添加</el-button>
     </el-col>
       <el-col :span="1.5">
       <el-button
           type="info"
           plain
           icon="el-icon-sort"
           size="mini"
           @click="toggleExpandAll"
       >展开/折叠</el-button>
     </el-col>

    </el-row>

    <el-table
       v-if="refreshTble"
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="menuId"
        border
        default-expand-all="isExpandAll"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="menuId"
          label="menuId"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="menuName"
          label="系统名称"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="orderNum"
          sortable
          label="顺序"
          width="120">
      </el-table-column>
      <el-table-column
          prop="parms"
          sortable
          label="权限标识">
      </el-table-column>
      <el-table-column
          prop="status"
          sortable
          label="菜单状态">
        <template v-slot="s">
          <span v-if="s.row.status==0"> <el-button type="primary" plain>正常</el-button></span>
          <span v-if="s.row.status==1"> <el-button type="danger" plain>停用</el-button></span>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="180">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.menuId)" type="text" size="medium">修改</el-button>
          <el-button   type="text" size="medium" @click="toadd">添加</el-button>
          <el-button type="text" size="medium" @click="deletes(scope.row.menuId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form  :model="form">
        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-select   v-model="form.parentId" placeholder="请选择上级菜单">
            <el-option :key="menuId" :label="menunames" :value="menuId"   style="height: 200px">
              <div class="block">
                <el-tree
                    :data="options"
                    node-key="menuId"
                    :props="defaultProps "
                    @node-click="handleChange"></el-tree>

                <!--          <el-cascader-->
                <!--              v-model="form.parentId"-->
                <!--              :options="options"-->
                <!--              :props="{ checkStrictly: true , expandTrigger: 'hover' ,value:'menuId',label:'menuName' }"-->
                <!--              @change="handleChange"></el-cascader>-->
              </div>
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio-group v-model="currentDataIndex">
              <el-radio  :label="1" >首页</el-radio>
              <el-radio  :label="2">菜单</el-radio>
              <el-radio  :label="3">按钮</el-radio>
          </el-radio-group>
        </el-form-item>

        <div v-if="currentDataIndex===1">
          <el-row>
            <el-col :span="12">
          <el-form-item label="菜单名称" :label-width="formLabelWidth">
            <el-input v-model="form.menuName" autocomplete="off" placeholder="请输入菜单名称"></el-input>
          </el-form-item>
            </el-col>
            <el-col :span="12">
          <el-form-item label="显示顺序" :label-width="formLabelWidth">
            <template>
              <el-input-number v-model="form.orderNum" controls-position="right" :min="1" :max="100"></el-input-number>
            </template>
          </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
          <el-form-item label="是否外链" :label-width="formLabelWidth">
            <el-radio v-model="form.isFrame" label="0">是</el-radio>
            <el-radio v-model="form.isFrame" label="1">否</el-radio>
          </el-form-item>
            </el-col>
            <el-col :span="12">
          <el-form-item label="路由地址" :label-width="formLabelWidth">
            <el-input v-model="form.path" autocomplete="off" placeholder="请输入路由地址"></el-input>
          </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
          <el-form-item label="显示状态" :label-width="formLabelWidth">
            <el-radio v-model="form.visible" label="0">显示</el-radio>
            <el-radio v-model="form.visible" label="1">隐藏</el-radio>
          </el-form-item>
            </el-col>
            <el-col :span="12">
          <el-form-item label="菜单状态" :label-width="formLabelWidth">
            <el-radio v-model="form.status" label="0">正常</el-radio>
            <el-radio v-model="form.status" label="1">停用</el-radio>
          </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div v-if="currentDataIndex===2">
          <el-row>
            <el-col :span="12">
              <el-form-item label="菜单名称" :label-width="formLabelWidth">
                <el-input v-model="form.menuName" autocomplete="off" placeholder="请输入菜单名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="显示顺序" :label-width="formLabelWidth">
                <template>
                  <el-input-number v-model="form.orderNum" controls-position="right" :min="1" :max="100"></el-input-number>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否外链" :label-width="formLabelWidth">
                <el-radio v-model="form.isFrame" label="0">是</el-radio>
                <el-radio v-model="form.isFrame" label="1">否</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="路由地址" :label-width="formLabelWidth">
                <el-input v-model="form.path" autocomplete="off" placeholder="请输入路由地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="组件路径" :label-width="formLabelWidth">
                <el-input v-model="form.component" autocomplete="off" placeholder="请输入组件路径"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="权限字符" :label-width="formLabelWidth">
                <el-input v-model="form.parms" autocomplete="off" placeholder="请输入权限字符"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="路由参数" :label-width="formLabelWidth">
                <el-input v-model="form.query" autocomplete="off" placeholder="请输入路由参数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否外链" :label-width="formLabelWidth">
                <el-radio v-model="form.isCache" label="0">缓存</el-radio>
                <el-radio v-model="form.isCache" label="1">不缓存</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="显示状态" :label-width="formLabelWidth">
                <el-radio v-model="form.visible" label="0">显示</el-radio>
                <el-radio v-model="form.visible" label="1">隐藏</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单状态" :label-width="formLabelWidth">
                <el-radio v-model="form.status" label="0">正常</el-radio>
                <el-radio v-model="form.status" label="1">停用</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div v-if="currentDataIndex===3">
          <el-row>
            <el-col :span="12">
              <el-form-item label="菜单名称" :label-width="formLabelWidth">
                <el-input v-model="form.menuName" autocomplete="off" placeholder="请输入菜单名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="显示顺序" :label-width="formLabelWidth">
                <template>
                  <el-input-number v-model="form.orderNum" controls-position="right" :min="1" :max="100"></el-input-number>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="权限字符" :label-width="formLabelWidth">
                <el-input v-model="form.parms" autocomplete="off" placeholder="请输入权限字符"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单状态" :label-width="formLabelWidth">
                <el-radio v-model="form.status" label="0">正常</el-radio>
                <el-radio v-model="form.status" label="1">停用</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="toaddanupdate==1" type="primary" @click="add()">添加</el-button>

      </div>
    </el-dialog>
    <el-dialog title="修改" :visible.sync="dialogFormVisibles">
      <el-form  :model="forms">
        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-select   v-model="parentName" placeholder="请选择上级菜单">
            <el-option  :label="menunames" :value="menuId"   style="height: 200px">

              <div class="block">
                <el-tree
                    :data="options"
                    node-key="menuId"
                    :props="defaultProps "
                    @node-click="handleChange"></el-tree>

                <!--          <el-cascader-->
                <!--              v-model="form.parentId"-->
                <!--              :options="options"-->
                <!--              :props="{ checkStrictly: true , expandTrigger: 'hover' ,value:'menuId',label:'menuName' }"-->
                <!--              @change="handleChange"></el-cascader>-->
              </div>
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio-group v-model="currentDataIndex">
              <el-radio  :label="1" >首页</el-radio>
              <el-radio  :label="2">菜单</el-radio>
              <el-radio  :label="3">按钮</el-radio>
          </el-radio-group>
        </el-form-item>

        <div v-if="currentDataIndex===1">
          <el-row>
            <el-col :span="12">
          <el-form-item label="菜单名称" :label-width="formLabelWidth">
            <el-input v-model="forms.menuName" autocomplete="off" placeholder="请输入菜单名称"></el-input>
          </el-form-item>
            </el-col>
            <el-col :span="12">
          <el-form-item label="显示顺序" :label-width="formLabelWidth">
            <template>
              <el-input-number v-model="forms.orderNum" controls-position="right" :min="1" :max="100"></el-input-number>
            </template>
          </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
          <el-form-item label="是否外链" :label-width="formLabelWidth">
            <el-radio v-model="forms.isFrame" label="0">是</el-radio>
            <el-radio v-model="forms.isFrame" label="1">否</el-radio>
          </el-form-item>
            </el-col>
            <el-col :span="12">
          <el-form-item label="路由地址" :label-width="formLabelWidth">
            <el-input v-model="forms.path" autocomplete="off" placeholder="请输入路由地址"></el-input>
          </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
          <el-form-item label="显示状态" :label-width="formLabelWidth">
            <el-radio v-model="forms.visible" label="0">显示</el-radio>
            <el-radio v-model="forms.visible" label="1">隐藏</el-radio>
          </el-form-item>
            </el-col>
            <el-col :span="12">
          <el-form-item label="菜单状态" :label-width="formLabelWidth">
            <el-radio v-model="forms.status" label="0">正常</el-radio>
            <el-radio v-model="forms.status" label="1">停用</el-radio>
          </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div v-if="currentDataIndex===2">
          <el-row>
            <el-col :span="12">
              <el-form-item label="菜单名称" :label-width="formLabelWidths">
                <el-input v-model="forms.menuName" autocomplete="off" placeholder="请输入菜单名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="显示顺序" :label-width="formLabelWidths">
                <template>
                  <el-input-number v-model="forms.orderNum" controls-position="right" :min="1" :max="100"></el-input-number>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否外链" :label-width="formLabelWidths">
                <el-radio v-model="forms.isFrame" label="0">是</el-radio>
                <el-radio v-model="forms.isFrame" label="1">否</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="路由地址" :label-width="formLabelWidths">
                <el-input v-model="forms.path" autocomplete="off" placeholder="请输入路由地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="组件路径" :label-width="formLabelWidths">
                <el-input v-model="forms.component" autocomplete="off" placeholder="请输入组件路径"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="权限字符" :label-width="formLabelWidths">
                <el-input v-model="forms.parms" autocomplete="off" placeholder="请输入权限字符"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="路由参数" :label-width="formLabelWidths">
                <el-input v-model="forms.query" autocomplete="off" placeholder="请输入路由参数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否外链" :label-width="formLabelWidths">
                <el-radio v-model="forms.isCache" label="0">缓存</el-radio>
                <el-radio v-model="forms.isCache" label="1">不缓存</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="显示状态" :label-width="formLabelWidths">
                <el-radio v-model="forms.visible" label="0">显示</el-radio>
                <el-radio v-model="forms.visible" label="1">隐藏</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单状态" :label-width="formLabelWidths">
                <el-radio v-model="forms.status" label="0">正常</el-radio>
                <el-radio v-model="forms.status" label="1">停用</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div v-if="currentDataIndex===3">
          <el-row>
            <el-col :span="12">
              <el-form-item label="菜单名称" :label-width="formLabelWidths">
                <el-input v-model="forms.menuName" autocomplete="off" placeholder="请输入菜单名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="显示顺序" :label-width="formLabelWidths">
                <template>
                  <el-input-number v-model="forms.orderNum" controls-position="right" :min="1" :max="100"></el-input-number>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="权限字符" :label-width="formLabelWidths">
                <el-input v-model="forms.parms" autocomplete="off" placeholder="请输入权限字符"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单状态" :label-width="formLabelWidths">
                <el-radio v-model="forms.status" label="0">正常</el-radio>
                <el-radio v-model="forms.status" label="1">停用</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "CarLikeView",
  data() {
    return {
      parentName:'',
      toaddanupdate:'',
      dialogFormVisibles:false,
      formLabelWidths:'120px',
      forms:{
        parentId:'',
      },

      refreshTble:true,
      isExpandAll:true,
      menunames:'',
      menuId:'',
      currentDataIndex: 1,
      options:[],
      tableData:[],
      formLabelWidth:'120px',
      looklist:{
        menuName:'',
        status:''},
      dialogFormVisible:false,
      form:{
        parentId:'',
        menuName:'',
        orderNum:'',
        isFrame:'',
        path:'',
        visible:'',
        status:'',
        component:'',
        parms:'',
        query:'',
        isCache:'',

      },
      defaultProps:{
        label:'menuName',
        children:'children',
      },

    }
  }, methods: {
    toggleExpandAll(){
      this.refreshTble=false;
      this.isExpandAll=!this.isExpandAll;
      this.$nextTick(()=>{
        this.refreshTble=true;
      })
    },
    deletes(menuId){
      this.axios.post("http://localhost:6785/menu/deletebyid/"+menuId).then(res=>{
        if(res.data.code==200){
          this.$message.success("删除成功");
          this.list();
        }else{
          this.$message.error("删除失败");
        }
      })
    },
    handleClick(menuId){
      this.toaddanupdate=0;
        this.axios.post("http://localhost:6785/menu/getbyid/"+menuId).then(res=>{
          this.listsanli();
          this.dialogFormVisibles=true;
          this.forms=res.data.data;
          this.parentName=res.data.data.menuName;
          this.forms.parentId=res.data.data.parentId;
        })
    },
    update(){
      this.axios.post("http://localhost:6785/menu/update",this.forms).then(res=>{
        if(res.data.code==200){
          this.dialogFormVisibles=false;
          this.$message.success(res.data.data);
          this.list();
        }else{
          this.$message.error(res.data.data);
        }
      })
    },

    add(){
      console.log(this.form.parentId);
      this.axios.post("http://localhost:6785/menu/add",this.form).then(res=>{
        if(res.data.code==200){
          this.dialogFormVisible=false;
          this.$message.success(res.data.data);
          this.list();
        }else{
          this.$message.error(res.data.data);
        }
      })
    },

    toadd(){
      this.toaddanupdate=1;
      this.listsanli();
      this.dialogFormVisible=true;
      this.form={};


    },
    listsanli(){
      this.axios.post("http://localhost:6785/menu/listss").then(res=>{
        this.options=res.data.data;
      })
    },
    handleChange(data){
   this.menuId=data.menuId;
   console.log(this.menuId);
   this.menunames=data.menuName;
   this.parentName=data.menuName;
   console.log(this.menunames);
      this.form.parentId=data.menuId;
      this.forms.parentId=data.menuId;

    },
    zhikong(){
      this.looklist={};
    },
    list(){
      this.axios.get("http://localhost:6785/menu/lookselecttree?menuName="+this.looklist.menuName).then(res=>{
        this.tableData=res.data;
        console.log(this.tableData);
      })
    }
  }, created() {
    this.list();
  }
}
</script>

<style scoped>

</style>